<script setup>
import { ref } from 'vue'
import { sendDockerLog } from '@/assets/api/api'
import { useUserStore } from '@/stores/index'
const userStore = useUserStore()
const currentPage = ref(1)
const pageSize = 13
const total = ref(0)
const dataList = ref()
const formData = ref({
    channel_name: '',
    log_type: '',
})
function getData() {
    sendDockerLog({
        license_information: userStore.systemInfo.gatewayPermit,
        page: currentPage.value,
        limit: pageSize,
        ...formData.value,
    }).then((res) => {
        dataList.value = res.data.Items
        total.value = res.data.totalSize
    })
}
function handleCurrentChange(e) {
    currentPage.value = e
    getData()
}
getData()
const ruleFormRef = ref()
function resetForm(formEl) {
    if (!formEl) return
    formEl.resetFields()
    getData()
}
const logtypeList = [
    '新增',
    '启动',
    '停止',
    '删除',
    '异常',
    '购买',
    '下载',
    '升级',
]
</script>
<template>
    <div class="filter-box white-box d-flex" style="padding: 0.05rem">
        <el-form
            :inline="true"
            :model="formData"
            ref="ruleFormRef"
            class="d-flex-1"
        >
            <el-form-item prop="channel_name">
                <el-input
                    placeholder="请输入通道名称"
                    v-model="formData.channel_name"
                />
            </el-form-item>
            <el-form-item prop="log_type">
                <el-select
                    v-model="formData.log_type"
                    class="m-2"
                    placeholder="请选择日志类型"
                >
                    <el-option
                        v-for="item in logtypeList"
                        :key="item"
                        :label="item"
                        :value="item"
                    />
                </el-select>
            </el-form-item>
            <el-button type="primary" @click="getData">查询</el-button>
            <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form>
    </div>
    <div class="white-box d-flex-1 overflow-auto ps-re mt-10">
        <el-table :data="dataList" class="my-10 full" style="width:100%">
            <el-table-column
                label="日志时间"
                prop="log_time"
                align="center"
            />
            <el-table-column
                label="设备号"
                prop="device_number"
                align="center"
            />
            <el-table-column
                label="通道名称"
                prop="channel_name"
                align="center"
            />
            <el-table-column
                label="算法名称"
                prop="task_name"
                align="center"
            />
            <el-table-column
                label="日志类型"
                prop="log_type"
                align="center"
            />
            <el-table-column width="400" label="日志内容" prop="log_action" />
        </el-table>
        <el-pagination
            small
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            layout="prev, pager, next, jumper"
            v-model:total="total"
            @current-change="handleCurrentChange"
        />
    </div>
</template>
<style lang="scss" scoped>
::v-deep(.el-form-item) {
    margin-bottom: 0;
}
</style>
